<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>日志管理</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
</head>
<body>
  <div id="app" v-cloak v-show="appShow" class="animated fadeInRight">
    <el-form ref="form" :model="form" label-width="80px" style="width: 900px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="选择时间">
            <el-date-picker
              v-model="form.datePicker"
              type="daterange"
              align="right"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="操作内容" >
            <el-input v-model="form.action" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="用户名">
            <el-input v-model="form.userName" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="操作类型">
            <el-select v-model="form.operateType" clearable size="small" placeholder="请选择">
              <el-option 
                v-for="item in options"
                :key="item.keyValue"
                :label="item.keyName"
                :value="item.keyValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="small" v-show="resourceMap.saveUserInfo">&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData.list" highlight-current-row border size="small" :max-height="windowHeight" style="width: 100%">
      <el-table-column type="index" ></el-table-column>
      <el-table-column prop="gmt_modified" sortable label="操作时间" width="300"></el-table-column>
      <el-table-column prop="typeName" label="操作类型" width="200"> </el-table-column>
      <el-table-column prop="userName" label="操作人" width="200"></el-table-column>
      <el-table-column prop="action" label="操作内容" show-overflow-tooltip> </el-table-column>
    </el-table>
    <br>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[20,50,100,150,200]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="tableData.totalElement">
    </el-pagination>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>

    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          appShow:false,
          resourceMap:storageLocal.getName('user'),
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick:function(picker) {
                var end = new Date();
                var start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick:function(picker) {
                var end = new Date();
                var start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick:function(picker) {
                var end = new Date();
                var start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          tableData: [],
          form: {
              userName: '',
              operateType: '', 
              action:'',             
              datePicker:''
          },
          windowHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 220,
          currentPage:1,
          pageSize:50,
          options:[]
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.getSelectLog()
          this.requestModel()
        })
      },
      updated:function(){
        this.appShow = true
      },
      methods: {
          onSubmit:function() { 
            this.currentPage = 1;
            this.requestModel()
          },
          handleSizeChange:function(val) {
            this.pageSize = val;
            this.requestModel();
          },
          handleCurrentChange:function(val) {
            this.requestModel()
          },
          getSelectLog:function(){//获取操作类型下拉列表
            resourceRequst("/dic/queryByType",{keyType:'log_query'},function(res){
                vm.options = res.getResult
            },true)
          },
          requestModel:function(){
            var data = {
              "startTime":this.form.datePicker?this.form.datePicker[0]:'',
              "endTime":this.form.datePicker?this.form.datePicker[1]:'',
              "userName":this.form.userName?this.form.userName:'', 
              "operateType":this.form.operateType?this.form.operateType:'',
              "action":this.form.action?this.form.action:'',
              "page":this.currentPage-1?this.currentPage-1:'',
              "pageSize":this.pageSize?this.pageSize:''
            }
            resourceRequst("/log/queryLogInfo",data,function(res){
                vm.tableData = res.getResult
            })
          }
      }
    })
  </script>
</html>